import React from 'react';
import  './epidemicCom.css';
class EpidemicCom extends  React.Component{
    constructor(props){
        super(props);
        this.state={
            epideData:this.props.epideData,
            OverSeasEpidemicData:this.props.OverSeasEpidemicData,
            tiemLineArr:[],
            currentArea:1,
            overSeasTotal:null,
        }
    };
    componentWillMount(){
        //处理国内疫情数据的时间线数据包
            let timeline = new Set();
            let countNum =0;
            for(let key in this.state.epideData.data.timeline){
                let obj={};
                obj[countNum]={...this.state.epideData.data.timeline[key],time:key};
                countNum++;
                timeline.add(obj)
            }
            this.setState({
                tiemLineArr:[...timeline]
            })
        //处理国外疫情数据的total数据
        let diagnosisAll =0;
        let cureAll = 0;
        let deathAll = 0;
        let suspectedall =0;
        this.state.OverSeasEpidemicData.data.forEach((item,idx)=>{
            diagnosisAll += item.diagnosis;
            cureAll += item.cure;
            deathAll += item.death;
            suspectedall += 0;
        });
        let overSeasTotal={
            diagnosisAll ,
            cureAll,
            deathAll,
            suspectedall
        };
        this.setState({
            overSeasTotal
        })
        // console.log(this.props)
        // console.log('传过来的疫情数据：',this.state.epideData,this.state.OverSeasEpidemicData,overSeasTotal)
        //吸顶效果
        window.addEventListener('scroll',function () { 
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            // console.log('滚动了',scrollTop);
            let imgHeight =window.localStorage.getItem('imgHeight');
            imgHeight = Number(imgHeight);
            if(scrollTop>14*22+imgHeight){
                let headTable = document.getElementById('table_head');
                headTable.style.position='fixed';
                headTable.style.backgroundColor='white';
                headTable.style.top='0';
                headTable.style.zIndex='99';
                headTable.style.borderBottom='none';
            }else{
                let headTable = document.getElementById('table_head');
                headTable.style.position='static';
                headTable.style.borderBottom='1px dashed #999';
            }
           
         })
    };

    changeArea=(num)=>{
        // console.log(num)
        this.setState({
            currentArea:num,
        })
    }
    render(){
        if(this.state.currentArea==1){
            return (
                <div className='epidemicWrap' >
                    {/* 总体情况开始 */}
                    <header className='global_wrap'>
                        <div className='head_top'>
                            <h5>
                            截止{
                                this.state.tiemLineArr[this.state.tiemLineArr.length-1][this.state.tiemLineArr.length-1].time
                            }数据统计
                            </h5>
                            <p className='area_title'>
                                <span className='domestic span_selected' onClick={()=>{this.changeArea(1)}}>国内疫情</span>
                                <span className='overseas' onClick={()=>{this.changeArea(2)}}>国外疫情</span>
                            </p>
                        </div>
                        <ol className='total_list'>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b1'>{this.state.tiemLineArr[this.state.tiemLineArr.length-1][this.state.tiemLineArr.length-1].diagnosed-this.state.tiemLineArr[this.state.tiemLineArr.length-2][this.state.tiemLineArr.length-2].diagnosed}</b></p>
                                <b className='num_b num_b1'>{this.state.epideData.data.total.diagnosed}</b>
                                <span>累计确诊</span>
                            </li>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b2'>{this.state.tiemLineArr[this.state.tiemLineArr.length-1][this.state.tiemLineArr.length-1].died-this.state.tiemLineArr[this.state.tiemLineArr.length-2][this.state.tiemLineArr.length-2].died}</b></p>
                                <b className='num_b num_b2'>{this.state.epideData.data.total.died}</b>
                                <span>累计死亡</span>
                            </li>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b3'>{this.state.tiemLineArr[this.state.tiemLineArr.length-1][this.state.tiemLineArr.length-1].cured-this.state.tiemLineArr[this.state.tiemLineArr.length-2][this.state.tiemLineArr.length-2].cured}</b></p>
                                <b className='num_b num_b3'>{this.state.epideData.data.total.cured}</b>
                                <span>累计治愈</span>
                            </li>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b4'>{this.state.tiemLineArr[this.state.tiemLineArr.length-1][this.state.tiemLineArr.length-1].suspected-this.state.tiemLineArr[this.state.tiemLineArr.length-2][this.state.tiemLineArr.length-2].suspected}</b></p>
                                <b className='num_b num_b4'>{this.state.epideData.data.total.suspected}</b>
                                <span>累计疑似</span>
                            </li>
                        </ol>
                    </header>
                    {/* 总体情况结束 */}
                    {/* 中国各个省份开始 */}
                    <div className='provinceList'>
                        <h5 className='title'>中国各个省份</h5>
                        <div className='province_table' id='province_table'>
                            <div className='table_head' id='table_head'>
                                <span>地区</span>
                                <span>确诊人数</span>
                                <span>治愈人数</span>
                                <span>死亡人数</span>
                                <span>疑似人数</span>
                            </div>
                            <ul className='province_numWrap'>
                                {
                                    this.state.epideData.data.detail.map((item,index)=>{
                                        return (
                                            <li className='province_item' key={item.id}>
                                                <span className='province_name'>{item.city}</span>
                                                <span className='province_num'>{item.diagnosed}</span>
                                                <span className='province_num'>{item.cured}</span>
                                                <span className='province_num'>{item.died}</span>
                                                <span className='province_num'>{item.suspected}</span>
                                            </li>
                                        )
                                    })
                                }
                               
                            </ul>
                        </div>
                    </div>
                    {/* 中国各个省份结束 */}
                </div> 
            )

        }else{
            return (
                <div className='epidemicWrap' >
                    {/* 总体情况开始 */}
                    <header className='global_wrap'>
                        <div className='head_top'>
                            <h5>
                            截止{
                                this.state.OverSeasEpidemicData.data[this.state.OverSeasEpidemicData.data.length-1].updateTime
                            }数据统计
                            </h5>
                            <p className='area_title'>
                                <span className='domestic ' onClick={()=>{this.changeArea(1)}}>国内疫情</span>
                                <span className='overseas span_selected' onClick={()=>{this.changeArea(2)}}>国外疫情</span>
                            </p>
                        </div>
                        <ol className='total_list'>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b1'>'-'</b></p>
                                <b className='num_b num_b1'>{this.state.overSeasTotal.diagnosisAll}</b>
                                <span>累计确诊</span>
                            </li>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b2'>'-'</b></p>
                                <b className='num_b num_b2'>{this.state.overSeasTotal.deathAll}</b>
                                <span>累计死亡</span>
                            </li>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b3'>'-'</b></p>
                                <b className='num_b num_b3'>{this.state.overSeasTotal.cureAll}</b>
                                <span>累计治愈</span>
                            </li>
                            <li className='total_item'>
                                <p>较昨日<b className='num_b4'>'-'</b></p>
                                <b className='num_b num_b4'>{this.state.overSeasTotal.suspectedall}</b>
                                <span>累计疑似</span>
                            </li>
                        </ol>
                    </header>
                    {/* 总体情况结束 */}
                     {/* 海外开始 */}
                     <div className='provinceList'>
                        <h5 className='title'>海外国家</h5>
                        <div className='province_table' >
                            <div className='table_head' id='table_head'>
                                <span>地区</span>
                                <span>确诊人数</span>
                                <span>治愈人数</span>
                                <span>死亡人数</span>
                                <span>疑似人数</span>
                            </div>
                            <ul className='province_numWrap'>
                                {
                                    this.state.OverSeasEpidemicData.data.map((item,index)=>{
                                        return (
                                            <li className='province_item' key={index}>
                                                <span className='province_name'>{item.province}</span>
                                                <span className='province_num'>{item.diagnosis}</span>
                                                <span className='province_num'>{item.cure}</span>
                                                <span className='province_num'>{item.death}</span>
                                                <span className='province_num'>{item.suspecte?item.suspected:'-'}</span>
                                            </li>
                                        )
                                    })
                                }
                               
                            </ul>
                        </div>
                    </div>
                    {/* 海外结束 */}
                </div> 
            )
        }
        
    }
}

export default EpidemicCom;